<!DOCTYPE html>
<html>
  <head>
    <title>Life Planner by Team Awesome</title>
    <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
    <link href="/static/life_planner.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/static/life_planner.js"></script>
  </head>
  <body>
    <h1>The Life Planner!</h1>
    <h2>the best life planner ever. for serious.</h2>
    <div id="white_block"> 
    </div>
    <div id="invisible_space">
    </div>
    <div id="lights_logo">
      <img src="/static/light_green_small.png"> <img src="/static/light_blue_small.png"> <img src="/static/light_purple_small.png">
    </div>
    <ul class="message_bar">
          <a href="/"><li>Home</li></a>
          <a href="/instructions"><li>Instructions</li></a>
          <a href="/life_planner"><li>Life Planner</li></a>
          <li id="new_post">New Post
            <ul class="message_dropdown">
              <li>
                <form action="/settings" method="post" id="post_form">
                <textarea name="content" type="input/text" col='40' rows='5' ></textarea>
                <p>
                  <label><input type="checkbox" name="cal_tag" />Add to To Do List</label>
                </p>
                  <label><input type="checkbox" name="AM" />AM</label>
                  <label><input type="checkbox" name="PM" />PM</label>
                <p>
                  <label><input type="checkbox" name="mon_tag" />Add to Budget</label>
                </p>
                <p>
                  <label><input type="checkbox" name="fla_tag" />Add to Flash Cards</label>
                </p>
                <input type="submit" name="submit" />
            </form>
          </li>
        </ul>
      </li>
      <a href="/favSite"><li>FavSite</li></a>
      <a href="/settings"><li id="active_button">Settings</li></a>
      <a href='/contact'><li>Contact Us</li></a>
    </ul>
    <div class="content">
      <h3>Settings</h3>
      <h4>Budget Settings</h4>
        <p>Use this page to set your initial monthly income, savings, and expenses. This will be used for your budget.</p>
      <form action='/settings' method='post'>
        Savings: <input type="text" name="savings" />
        Monthly Income: <input type="text" name="monthly_income" />
        Monthly Expenses: <input type="text" name="monthly_expenses" />
        <input type="submit" name="submit" />
      </form>
      <h4>Previous Posts</h4>
      <p>Here you are able to see all the updates you have posted. Colored in circles indicate which parts of the life planner the post is displayed in. To do list circles are green, budget circles are blue, and flashcards circles are purple. Clicking on a circle will allow you to turn the display on and off. You also have the option to delete former posts.
      </p>
      <form action="/settings" method="post">
        <table class="post_tables">
          <tr>
            <td>Post Content
            </td>
            <td>In To Do List?
            </td>
            <td>In Budget?
            </td>
            <td>In Flashcards?
            </td>
            <td>Delete
            </td>
            {% for message in messages %}
              <tr>
                <td>
                  {{ message.content }}
                </td>
                <td>
                  {% if message.calendar %}
                    <input type="image" src="/static/light_green_small.png" name="cal_tag_on" value="{{ message.key }}" alt="Message is in the calendar" />
                  {% else %}
                    <input type="image" src="/static/light_gray_small.png" name="cal_tag_off" value="{{ message.key }}" alt="Message is not in the calendar" />
                  {% endif %}
                </td>
                <td>
                  {% if message.money %}
                    <input type="image" src="/static/light_blue_small.png" name="mon_tag_on" value="{{ message.key }}" alt="Message is in the budget" />
                  {% else %}
                    <input type="image" src="/static/light_gray_small.png" name="mon_tag_off" value="{{ message.key }}" alt="Message is not in the budget" />
                  {% endif %}
                </td> 
                <td>
                  {% if message.flashcards %}
                    <input type="image" src="/static/light_purple_small.png" name="fla_tag_on" value="{{ message.key }}" alt="Message is in the flashcards" />
                  {% else %}
                    <input type="image" src="/static/light_gray_small.png" name="fla_tag_off" value="{{ message.key }}" alt="Message is not in the flashcards" />
                  {% endif %}
                </td>
                <td>
                  <input type="image" src="/static/redx.png" name="delete" value="{{ message.key }}" alt="Delete this post" />
                </td>
              </tr>
            {% endfor %}
          </tr>
        </table>
      </form>
    </div>
  </body>
</html>
